<!DOCTYPE html>

<html class="noIE" lang="en-US">
	<!--<![endif]-->
	<head>
		<title>文明共创工作室</title>

		<!-- meta -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no">
		<link href="images/wmgc_logo_bg.ico" rel="shortcut icon"/>
		<!-- google fonts -->

		<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans">
		<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Serif:regular,bold">
		<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Alegreya+Sans:regular,italic,bold,bolditalic">
		<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Nixie+One:regular,italic,bold,bolditalic">
		<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Alegreya+SC:regular,italic,bold,bolditalic">

		<!-- css -->
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<link rel="stylesheet" href="css/font-awesome.min.css">
		<link rel="stylesheet" href="css/style.css" media="screen">

		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!--[if lt IE 9]>
			<script src="assets/js/html5shiv.js"></script>
			<script src="assets/js/respond.js"></script>
		<![endif]-->
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<link href="css/font-awesome.css" rel="stylesheet" type="text/css">
		<link href="css/style.css" rel="stylesheet" type="text/css">
		<!--[if IE 8]>
	    	<script src="assets/js/selectivizr.js"></script>
	    <![endif]-->
		<script>
			var date = [];
			var dateFlag = [];
			var nowEvent;
			Date.prototype.Format = function (fmt) { //author: meizz    //工具
				var o = {  
					"M+": this.getMonth() + 1, //月份   
					"d+": this.getDate(), //日   
					"H+": this.getHours(), //小时   
					"m+": this.getMinutes(), //分   
					"s+": this.getSeconds(), //秒   
					"q+": Math.floor((this.getMonth() + 3) / 3), //季度   
					"S": this.getMilliseconds() //毫秒   
				};  
				if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));  
				for (var k in o)  
				if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));  
				return fmt;  
			}  
			$(function (){ //获取3-8天前的每日一图
				var backgroundUrl = null;
				var today = new Date();
				var timestamp = Date.parse(today);
				var dayAgo =  rand = parseInt(Math.random() * 5 + 3);
				var tenDayAgo = timestamp - dayAgo*24*60*60*1000; //获取三天前的图
				var timeAgo = new Date(tenDayAgo);
				var picSrc = 'https://cdn.jsdelivr.net/gh/ITJoker233/BingPicApi/pic/'+timeAgo.Format("yyyyMMdd")+'.png'
				var englishSrc = "http://open.iciba.com/dsapi/"
				$.ajax({
					url : picSrc,
					async : false,
					type : 'HEAD',
					error : function() {
						$(".header-wrapper-inner").css("background","url(images/header-bg.jpg)"); //不存在则默认图片
					}, success : function() {
						$(".header-wrapper-inner").css("background",'url('+picSrc+')'); //存在则切换
					}
				});
			})
			$(function (){ //刷新时间
			  function timer(timestamp) {
				  let day = 0, hour = 0, minute = 0, second = 0;
				  if (timestamp > 0) {
					  day = Math.floor(timestamp / (60 * 60 * 24));
					  hour = Math.floor(timestamp / (60 * 60))  - (day * 24);
					  minute = Math.floor(timestamp / 60)- (day * 24 * 60) - (hour * 60);
					  second = Math.floor(timestamp) - (day * 24 * 60 * 60) - (hour * 60 * 60)-(minute*60);
				  }
				  if(day<=18) day='0'+day;
				  if(hour<=9) hour='0'+hour;
				  if (minute <= 9) minute = '0' + minute;
				  if (second <= 9) second = '0' + second;
				  $("#d").text(day);
				  $("#h").text(hour);
				  $("#m").text(minute);
				  $("#s").text(second);
			  }
			  function updateTime(events){
			  	var nowdate = new Date();
			  	var year = nowdate.getFullYear();
			  	var flag = 0;
			  	for(var i = 0; i < events.length; i++){
			  		date[i] = year + '-' + events[i].date + ' ' + events[i].time + ':00';
			  		res=Math.floor(Date.parse(new Date(date[i]))/1000-Date.now()/1000);
					 
			  		if(res < 0){
			  			dateFlag[i] = 1;
			  		}else if(flag == 0){
			  			flag = 1;
			  			$('#dailysentence_c').html(events[i].content+'天数');
			  			$('#dailysentence').html(events[i].msg);
			  			nowEvent = date[i];
			  		}
			  	}
			  	//输入目标时间
			  	let timeTarget="2019-05-04 00:00:00";
			  	if(nowEvent!= null){
			  		timeTarget = nowEvent;
			  	}
			  	window.setInterval(function (){
			  		  res=Math.floor(Date.parse(Date.now()/1000- new Date(timeTarget)/1000));
			  		  timer(res);
			  	},1000);
			  };
			  $.ajax({
			  	type : "GET",
			  	url : "./json/events.json",
			  	data : {
			  		method : "query"
			  	},
			  	dataType : "json",//返回的数据类型
			  	success : function(data) {
			  		$('#eventname1').html(data.name);
			  		$('#eventname2').html(data.name);
			  		var html = '';
			  		var color = ['bg-warning','bg-info','bg-secondary','bg-success'];
			  		var fa = ['fa-suitcase','fa-dashboard','fa-camera','fa-tint'];
			  		updateTime(data.events);
			  		for ( var i = 0; i < data.events.length; i++) {//循环json对象，拼接tr,td的html
			  			html += '<div class="timeline2-entry">',
			  			html += '	<div class="timeline2-entry-inner">';
			  			if(dateFlag[i] == 1){
			  				html += '		<div class="timeline2-icon" style = "opacity:0.7">';
			  			}
			  			else {
			  				html += '		<div class="timeline2-icon '+color[parseInt(Math.random() * 4 )]+'">'
			  			}
			  			html += '<i class="fa '+fa[i%3]+'"></i></div>',
			  			html += '		<div class="timeline2-label">',
			  			html += '			<h2><a href="#"><strong>'+data.events[i].date+'</strong></a></h2>',
			  			html += 			data.events[i].link,
			  			html += '			<p>'+data.events[i].content+'</p>',
			  			html += '		</div>',
			  			html += '	</div>',
			  			html += '</div>'
			  		}
			  		html += '<div class="timeline2-entry begin">',
			  		html += '	<div class="timeline2-entry-inner">',
			  		html += '		<div class="timeline2-icon"><i class="fa fa-plus" style="color: #cccccc;position: relative;top: 3px;"></i></div>',
			  		html += '	</div>',
			  		html += '</div>',
			  		$('#schedule').html(html);//通过jquery方式获取table，并把tr,td的html输出到table中1
			  	},
			  	error : function() {
			  		alert("查询失败！");
			  	}
			  });
			});
			function deletePadding(){
				window.setInterval(function (){
					  $(document.body).css({'padding-right':'0px'});
				},100);
			};
			//改变视频
			function changeSrc(src){
				$('#videoIframe iframe').attr('src',src);
			};
			/*锚点动效*/
			$(function(){  
			  $('a[href*=#],area[href*=#]').click(function() {
			    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
					
			      var $target = $(this.hash);
				  if($target.selector == '#panel-element-58794') //不用跳转
					return
			      $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
			      if ($target.length) {
			        var targetOffset = $target.offset().top;
			        $('html,body').animate({
			          scrollTop: targetOffset
			        },
			        1000);
			        return false;
			      }
			    }
			  });
			})
			//获取成员表格
			$(function(){
				function addmaster(id,master){
					if(master.imgsrc != ""){
						let height = $('#'+id+' img').css("width");
						$('#'+id+' img').attr('src',master.imgsrc);
						$('#'+id+' img').attr('width',height);
					}
					$('#'+id+' p').html(master.msg);
					$('#'+id+' h1 strong').html(master.name);
					$('#'+id+' span').html(master.contact);
				};
				function addmembers(id,member){
					var html = '';
					var a = member.dayi.length;
					var b = member.daer.length;
					var c = member.dasan.length;
					var max_num = a>b? (a>c? a:c):(b>c? b:c)
					for ( var i = 0; i < max_num; i++) {//循环json对象，拼接tr,td的html
						html = html + '<tr>';
						html = html + '<td>' + (i+1) + '</td>';
						if(i < a)	html = html + '<td>' + member.dayi[i] + '</td>';
						else html = html + '<td>' + '------' + '</td>';
						if(i < b)	html = html + '<td>' + member.daer[i] + '</td>';
						else html = html + '<td>' + '------' + '</td>';
						if(i < c)	html = html + '<td>' + member.dasan[i] + '</td>';
						else html = html + '<td>' + '------' + '</td>';
						html = html + '</tr>';
					}
					$('#'+id+'').html(html);//通过jquery方式获取table，并把tr,td的html输出到table中
				};
				$.ajax({
					type : "GET",
					url : "./json/members.json",
					data : {
						method : "query"
					},
					dataType : "json",//返回的数据类型
					success : function(data) {
						console.log(data);
						addmaster('qmxmaster',data.qmxmaster);
						addmaster('kfzmaster1',data.kfzmaster[0]);
						addmaster('kfzmaster2',data.kfzmaster[1]);
						addmaster('kfzmaster3',data.kfzmaster[2]);
						addmaster('znzmaster1',data.znzmaster[0]);
						addmaster('znzmaster2',data.znzmaster[1]);
						addmaster('znzmaster3',data.znzmaster[2]);
						addmembers('kfzmembers',data.kfzmembers);
						addmembers('znzmembers',data.znzmembers);
					},
					error : function() {
						alert("查询失败！");
					}
				});
			})
		</script>
	</head>
	<!-- 模态框 -->
	

	<body>

		<div id="drawer-right">
			<div class="cross text-right">
				<a class="toggleDrawer" href="#"><i class="fa fa-times-circle fa-2x"></i></a>
			</div>
			<h2 id="eventname1">2022年度计划</h2>
			<div class="col-sm-12">
				<div class="timeline2-centered" id="schedule">
					<div class="timeline2-entry">
						<div class="timeline2-entry-inner">
							<div class="timeline2-icon bg-success"><i class="fa fa-tint"></i></div>
							<div class="timeline2-label">
								<h2><a href="#"><strong>03-01</strong></a></h2>
								<p>开学</p>
							</div>
						</div>
					</div>
					<div class="timeline2-entry">
						<div class="timeline2-entry-inner">
							<div class="timeline2-icon bg-success"><i class="fa fa-tint"></i></div>
							<div class="timeline2-label">
								<h2><a href="#"><strong>03-07</strong></a></h2>
								<p>组间答辩</p>
							</div>
						</div>
					</div>
					<div class="timeline2-entry">
						<div class="timeline2-entry-inner">
							<div class="timeline2-icon bg-secondary"><i class="fa fa-suitcase"></i></div>
							<div class="timeline2-label">
								<h2><a href="#"><strong>03-15</strong></a></h2><a href="#">招新网页</a>
								<p>宣讲会</p>
							</div>
						</div>
					</div>
					<div class="timeline2-entry">
						<div class="timeline2-entry-inner">
							<div class="timeline2-icon bg-info"><i class="fa fa-dashboard"></i></div>
							<div class="timeline2-label">
								<h2><a href="#"><strong>03-21</strong></a><a href="#">成绩查询</a></h2>
								<p>笔试</p>
							</div>
						</div>
					</div>
					<div class="timeline2-entry">
						<div class="timeline2-entry-inner">
							<div class="timeline2-icon bg-warning"><i class="fa fa-camera"></i></div>
							<div class="timeline2-label">
								<h2><a href="#"><strong>03-31</strong></a></h2><a href="#">进组须知</a>
								<p>进组</p>
							</div>
						</div>
					</div>
					<div class="timeline2-entry">
						<div class="timeline2-entry-inner">
							<div class="timeline2-icon bg-warning"><i class="fa fa-camera"></i></div>
							<div class="timeline2-label">
								<h2><a href="#"><strong>04-01</strong></a></h2>
								<a href="#">比赛地址</a>
								<p>愚人节专题比赛</p>
							</div>
						</div>
					</div>
					<div class="timeline2-entry begin">
						<div class="timeline2-entry-inner">
							<div class="timeline2-icon"><i class="fa fa-plus" style="color: #cccccc;position: relative;top: 3px;"></i></div>
						</div>
					</div>
				</div>
			</div>
			<div class="social">
				<h2>|-Stay Connected</h2>
				<ul>
					<li><a href="https://gitee.com/bumaya"><i class="fa fa-github-square fa-5x"></i></a></li>
					<li><a href="https://space.bilibili.com/285711041"><i class="fa fa-youtube-play fa-5x"></i></a></li>
					<li><a href="https://bumagithub.github.io/"><i class="fa fa-rss-square  fa-5x"></i></a></li>
					<li><a href><i class="fa fa-qq fa-5x"></i></a></li>
				</ul>
			</div>
		</div><!-- #drawer-right -->

		<div id="wrapper">

			<div id="header" class="content-block header-wrapper">
				<div class="header-wrapper-inner">
					<section class="top clearfix" style="opacity: 0.9;padding: 5px;">
						<div class="pull-left">
							<div class="btn-group dropright">
								  <button type="button" class="btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
									<span style="font-size: 20px;color: white;">文明共创工作室</span>
								  </button>
								  <div class="dropdown-menu">
									<!-- Dropdown menu links -->
									<a class="dropdown-item toggleDrawer" href="#" style="color: #000000;">近期计划表</a>
							        <a class="dropdown-item" href="#ourJobs">产品中心</a>
									<a class="dropdown-item" href="#services">服务</a>
									<a class="dropdown-item" href="#activity">活动</a>
									<a class="dropdown-item" href="#blog">动态</a>
									<a class="dropdown-item" href="#testimonials">友情链接</a>
							        <div class="dropdown-divider"></div>
							        <a class="dropdown-item" href="#contact">联系我们</a>
							        </div>
								</div>
						</div>
						<div class="pull-right">
							<a class="toggleDrawer" href="#"><i class="fa fa-bars fa-2x"></i></a>
						</div>
					</section>
					<section class="center">
						<header id="myheader">

							<div style="width:120px; height:160px; border-radius:10%; overflow:hidden;">
								<!-- 按钮：用于打开模态框 -->

								<img src="images/wmgc_logo_bg.png" width="300px"  hight="300px" />
							</div>
							<button type="button" class="btn btn-success" onclick="location='https://www.iloveyxr.top:8082/'"  onclick="deletePadding()" data-toggle="modal" data-target="#myModal">
								加入文明共创</a>
							</button>
				
							<nav>
								<ul>
								
									<li><a href="#english" class="toggleDrawer"><span style="color:white"><strong id="eventname2">2022计划</strong></span></a></li>
									<li><a href="#ourJobs"><span style="color:white"><strong>产品</strong></span></a></li>
								</ul>
							</nav>
						</header>
						<div class="secondary-slogan">
							<br>
							<h4 style="opacity: 0.8;color: gray;"><img src="https://visitor-badge.glitch.me/badge?page_id=cn2020.team.cc" class="img-rounded"></h4>
							<br><br><br>图片来自bing每日一图
						</div>
					</section>
					<section class="bottom">
						<a id="scrollToContent" href="#parallax">
							<img src="images/arrow_down.png">
						</a>
					</section>
				</div>
			</div><!-- header -->
			

			<div class="content-block" id="ourJobs">
				<div class="container">
					<header class="block-heading cleafix">
						<a href="#" class="btn btn-o btn-lg pull-right">View All</a>
						<h1>产品中心</h1>
						<p>已上线的产品</p>
					</header>
					<section class="block-body">
						<div class="row">
							<div class="col-sm-4">
								<a href="https://2020cn.cn" class="recent-work" style="background-image:url(images/e.jpg)">
									<span class="btn btn-o-white">经济文明APP</span>
								</a>
							</div>
							<div class="col-sm-4">
								<a href="https://chat.2020cn.cn/" class="recent-work" style="background-image:url(images/mid1.jpg)">
									<span class="btn btn-o-white">新文明-聊天</span>
								</a>
							</div>
							<div class="col-sm-4">
								<a href="https://game.2020cn.cn/" class="recent-work" style="background-image:url(images/job3.jpg)">
									<span class="btn btn-o-white">新文明-游戏</span>
								</a>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-4">
								<a href="#" class="recent-work" style="background-image:url(images/job4.jpg)">
									<span class="btn btn-o-white">新文明-云</span>
								</a>
							</div>
							<div class="col-sm-4">
								<a href="#" class="recent-work" style="background-image:url(images/job5.jpg)">
									<span class="btn btn-o-white">新文明-网盘</span>
								</a>
							</div>
							<div class="col-sm-4">
								<a href="#" class="recent-work" style="background-image:url(images/job6.jpg)">
									<span class="btn btn-o-white">新文明-支付</span>
								</a>
							</div>
						</div>
					</section>
				</div>
			</div><!-- #portfolio -->

			<div class="content-block parallax" id="services">
				<div class="container text-center">
					<header class="block-heading cleafix">
						<h1>我们的服务</h1>
						<p>文明共创工作室可以给你提供的外部服务</p>
						<div class="contant">
						
					</header>
					<section class="block-body">
						<div class="row">
							<div class="col-md-3">
								<a href="#contact">
									<div class="service">
										<i class="fa  fa-code"></i>
										<h2>网站建设</h2>
										<p style="color:white">搭建个人网站/企业官网等等</p>
									</div>
								</a>
							</div>
							<div class="col-md-3">
								<a href="#contact">
									<div class="service">
										<i class="fa fa-pencil-square-o"></i>
										<h2>小程序开发</h2>
										<p style="color:white">微信小程序等等</p>
									</div>
								</a>
							</div>
							<div class="col-md-3">
								<a href="#contact">
									<div class="service">
										<i class="fa fa-heart-o"></i>
										<h2>营销自动化</h2>
										<p style="color:white">自动发帖，自动回复等等</p>
									</div>
								</a>
							</div>
							<div class="col-md-3">
								<a href="#contact">
									<div class="service">
										<i class="fa fa-question-circle"></i>
										<h2>学习课程</h2>
										<p style="color:white">解决你学习路线/学习方向的问题等等</p>
									</div>
								</a>
							</div>
						</div>
					</section>
				</div>
			</div>
			<!-- #工作室活动 -->
			
			<div class="content-block" id="activity">
				<div class="container">
					<header class="block-heading cleafix">
						<a href="#" class="btn btn-o btn-lg pull-right">View All</a>
						<h1>工作室动态</h1>
						<p>Keep up with the latest happenings.</p>
					</header>
					<section class="block-body">
						<div class="row">
							<div class="col-sm-4 blog-post">
								<img src="images/blog1.jpg">
								<a href="#">
									<h2>工作室页面建立啦</h2>
								</a>
								<div class="date">2022 05 04</div>
								<p>In at accumsan risus. Nam id volutpat ante. </p>
								<a href>Read More</a>
							</div>
							<div class="col-sm-4 blog-post">
								<img src="images/blog2.jpg">
								<a href="#">
									<h2>Winter Is Comming</h2>
								</a>
								<div class="date">3 Nov, 2014</div>
								<p>In at accumsan risus. Nam id volutpat ante. </p>
								<a href>Read More</a>
							</div>
							<div class="col-sm-4 blog-post">
								<img src="images/blog3.jpg">
								<a href="#">
									<h2>The Illustration</h2>
								</a>
								<div class="date">3 Nov, 2014</div>
								<p>In at accumsan risus. Nam id volutpat ante. </p>
								<a href>Read More</a>
							</div>
						</div>
					</section>
				</div>
			</div>
			
	



			<div class="content-block" id="testimonials">
				<div class="container">
					<header class="block-heading cleafix">
						<h1>友情链接</h1>
						<p>不分先后</p>
						<p>请在下方联系提交您的链接</p>
					</header>
					<section class="block-body">
						<div class="container">
							<div class="row clearfix">
								<div class="col-md-12 column">
									<div class="row clearfix ">
										<div class="col-md-12 column">
											<div class="testimonial" id="qmxmaster">
												
												<p>自在到家</p>
												<h1><strong>自在到家</strong></h1><br>
												<span>自在到家</span>
											</div>
										</div>
									
											</div>
										</div>
									</div>
							

								</div>
							</div>
						</div>
					</section>
				</div>
			</div><!-- /#testimonials -->


			<div class="content-block" id="contact">
				<div class="container text-center">
					<header class="block-heading cleafix">
						<h1>联系我们</h1>
						<p>有需求就有解决方案！</p>
					</header>
					<section class="block-body">
						<div class="row">
							<div class="col-md-6 col-md-offset-3">
								<form class role="form">
									<div class="form-group">
										<input type="email" class="form-control form-control-white" id="subject" placeholder="Your Name" required>
									</div>
									<div class="form-group">
										<input type="email" class="form-control form-control-white" id="exampleInputEmail2" placeholder="Enter email"
										 required>
									</div>
									<div class="form-group">
										<textarea class="form-control form-control-white" placeholder="Write Something" required></textarea>
									</div>
									<input type="submit" class="btn btn-o-white" value="提交需求">
								</form>
							</div>
						</div>
					</section> 
				</div>
			</div><!-- #contact -->

			<div class="content-block" id="footer">
				<div class="container">
					<div class="row">
						<div class="col-xs-6">Copyright &copy; 2022.文明共创工作室 All rights reserved.</div>
						<div class="col-xs-6 text-right"></div>
					</div>
				</div>
			</div><!-- #footer -->


		</div>
		<!--/#wrapper-->




		<script src="js/jquery-2.1.3.min.js"></script>
		<script src="js/jquery-migrate-1.2.1.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/jquery.actual.min.js"></script>
		<script src="js/jquery.scrollTo.min.js"></script>
		<script src="js/script.js"></script>
		<style>
			.copyrights {
				text-indent: -9999px;
				height: 0;
				line-height: 0;
				font-size: 0;
				overflow: hidden;
			}
		</style>
	</body>
</html>
